<template>
  <div>
    <div id="box1" v-for="(item, index) in arr" :key="index">
      <input @click="ck2(item.id)" type="checkbox" v-model="item.status" :id="item.id" />
      <label :for="item.id">{{ item.task }}</label>
      <button @click="ck(item.id)">删除</button>
    </div>
  </div>
</template>
<script>
import bus from "../JS/bus";
export default {
  data() {
    return {
      a: true,
      num: 1,
      arr: [],
    };
  },
  methods: {
    ck(val) {
      for (let index = 0; index < this.arr.length; index++) {
        if (val == this.arr[index].id) {
          this.arr.splice(index, 1);
        }
      }
      bus.$emit("send2", this.arr);
      localStorage.setItem("arr", JSON.stringify(this.arr));
    },
    ck2(val) {
      let arr = JSON.parse(JSON.stringify(this.arr));
      for (let index = 0; index < this.arr.length; index++) {
        if (this.arr[index].id == val) {
          arr[index].status = !arr[index].status;
        }
      }
      bus.$emit("send2", arr);
    },
  },
  mounted() {
    let user = localStorage.getItem("arr");
    if (user) {
      this.arr = JSON.parse(user);
      for (let index = 0; index < this.arr.length; index++) {
        this.arr[index].status = false
      }
    }
    bus.$on("send5", (val) => {
      this.arr = val;
    });
    bus.$on("send4", (val) => {
      for (let index = 0; index < this.arr.length; index++) {
        this.arr[index].status = !val;
      }
    });
    setInterval(() => {
      bus.$emit("send3", this.arr);
    });
    bus.$on("send", (val) => {
      let obj = { id: this.num, task: val, status: false };
      // console.log(obj);
      this.arr.unshift(obj)
      this.num++;
      localStorage.setItem("arr", JSON.stringify(this.arr));
    });
  },
};
</script>
<style  lang="less" scoped>
#box1 {
  width: 90%;
  height: 30px;
  outline: @outline;
  margin: auto;
  position: relative;
  margin-top: 10px;

}

input {
  position: absolute;
  left: 5px;
  top: 5px;
}

label {
  position: absolute;
  width: 84%;
  left: 25px;
  top: 4px;
  overflow: hidden;
}

button {
  position: absolute;
  right: 8px;
  top: 5px;
  display: none;
}

#box1:hover button {
  display: block;
  background-color: red;
  color: white;
}

#box1:hover {
  background-color: aqua;

}
</style>